<template>
  <div id="app">
    <h4><center>移动端页面预览最佳</center></h4>
    <h4>基本使用</h4>
    <MobileTree
      :data="treeData"
      label="title"
      @change="handleMobileTreeChange"
    ></MobileTree>
    <h4>返回自身及子节点</h4>
    <MobileTree
      returnChildren
      :data="treeData"
      label="title"
      @change="handleMobileTreeChange1"
    ></MobileTree>
    <h4>返回当前选择层级</h4>
    <MobileTree
      returnLevels
      :data="treeData"
      label="title"
      @change="handleMobileTreeChange2"
    ></MobileTree>
  </div>
</template>

<script>
const treeData = require("./demo.json");
import MobileTree from "./MobileTree";
export default {
  name: "App",
  components: {
    MobileTree
  },
  data() {
    return {
      treeData
    };
  },
  methods: {
    handleMobileTreeChange(data, levels) {
      console.log(data);
      console.log(levels);
      alert(JSON.stringify(data));
    },
    handleMobileTreeChange1(data, levels) {
      alert(`当前节点:${JSON.stringify(data)}`);
    },
    handleMobileTreeChange2(data, levels) {
      alert(`当前节点:${JSON.stringify(data)}`);
      alert(`当前层级:${JSON.stringify(levels)}`);
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
  width: 100vw;
}
#app > h4,
#app > div {
  width: 80%;
  margin: 0 auto;
}

#app > div {
  height: 300px;
  margin-bottom: 50px;
}
</style>
